<template lang="">
  <div ref="box" class="box">
    111
  </div>
</template>
<script>
// import * as echarts from "echarts"
export default {
  name: "LineTwo",
  mounted() {
    let myChart = echarts.init(this.$refs.box)

    let option = {
      //图例
      legend: {
        top: "10%",       //图例位置
        textStyle: {      //图例文字样式
          color: "#98a2d1"
        }
      },
      //标题
      title: {
        text: "世界每周新增治愈和死亡人数",     //标题文本
        left: "50%",                      //标题位置（居中）
        textAlign: "center",            ////标题位置（居中）
        //标题样式
        textStyle: {
          color: "white",
          fontWeight: "normal",
          fontSize: 16
        }
      },
      //x轴
      xAxis: {
        //x轴为类目轴
        type: "category",
        data: ["06.09", "06.23", "07.07", "07.21", "08.04", "08.18", "09.10"],
        //x轴上的标签样式
        axisLabel: {
          color: "#8089ab"
        },
        //让line紧贴y轴
        boundaryGap: false
      },
      //y轴
      yAxis: {
        //y轴为数值轴
        type: "value",
        //y轴的标签样式
        axisLabel: {
          color: "#8089ab"
        },
        //分割线
        splitLine: {
          //分割线的样式
          lineStyle: {
            color: "#0e1b5b"
          }
        },
        //y轴轴线
        axisLine: {
          show: true,    //轴线是否显示
          //轴线样式
          lineStyle: {
            color: "#0c1e5e"
          }
        }



      },
      //网格（小盒子）
      grid: {
        left: 80,     //位置
        bottom: 20
      },
      //系列
      series: [
        {
          name: "死亡人数",     //系列的名称
          type: "line",       //类型
          symbol: "none",       //去掉线上的点点
          smooth: true,         //平滑
          areaStyle: {          //设置成面积图
            color: "#ff0000"
          },
          data: [100, 200, 300, 500, 1000, 2000, 600, 300]
        },
        {
          name: "治愈人数",
          type: "line",
          symbol: "none",
          smooth: true,
          areaStyle: {
            //面积样色渐变
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#00b87f' // 0% 处的颜色
              }, {
                offset: 1, color: 'transparent' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          data: [30000000, 35000000, 36000000, 37000000, 32000000, 30000000, 40000000, 43000000]
        }

      ]
    }
    myChart.setOption(option)
  }
}
</script>
<style lang="less" scoped>
.box {
  height: 250px;

}
</style>